<!-- 设备管理-设备列表页面 -->
<template>
  <px-card shadow="never">
    <px-scrollbar>
      <div style="display: flex; align-items: center">
        <px-button style="margin: 10px 0" type="primary" icon="Back" @click="backMainPage"> 返回 </px-button>
        <h4 style="margin-left: 10px">{{ detailsData.groupName }}</h4>
      </div>
      <px-descriptions border title="基础信息" :column="2">
        <px-descriptions-item width="120" label="科室">
          {{ detailsData.classNameDesc }}
        </px-descriptions-item>
        <px-descriptions-item width="120" label="系统">
          {{ detailsData.systemCodeDesc }}
        </px-descriptions-item>
      </px-descriptions>
      <h4 style="margin-top: 10px; font-weight: 800">抄表项</h4>
      <px-button v-has="'SYSTEM_AMR_ITEM_ADD'" icon="Plus" type="primary" style="margin: 10px 0" @click="handleAdd">新增抄表项</px-button>
      <px-table v-loading="loading" :data="detailsData.meterReadingItemList" border>
        <template #empty>
          <px-button v-has="'SYSTEM_AMR_ITEM_ADD'" icon="Plus" type="primary" style="margin: 10px 0" link @click="handleAdd">新增抄表项</px-button>
        </template>
        <px-table-column label="序号" type="index" width="55" align="center" fixed="left" />
        <px-table-column min-width="100" show-overflow-tooltip label="抄表项目" align="center" prop="itemName" />
        <px-table-column min-width="100" show-overflow-tooltip label="抄表Code" align="center" prop="itemCode" />
        <px-table-column min-width="120" show-overflow-tooltip label="绑定点位" align="center" prop="positionNum" />
        <px-table-column min-width="150" show-overflow-tooltip label="开始时间" align="center" prop="startTime" />
        <px-table-column min-width="80" show-overflow-tooltip label="周期类型" align="center" prop="periodTypeDesc" />
        <px-table-column min-width="100" show-overflow-tooltip label="时间间隔" prop="timeInterval" />
        <!-- <px-table-column min-width="120" show-overflow-tooltip label="固定时间" prop="categoryName" /> -->
        <px-table-column label="操作" align="center" fixed="right" width="120">
          <template #default="scope">
            <px-tooltip content="详情" placement="top">
              <px-button v-has="'SYSTEM_AMR_ITEM_DETAIL'" link icon="Tickets" type="primary" @click="handleDetail(scope.row)" />
            </px-tooltip>
            <px-tooltip content="编辑" placement="top">
              <px-button v-has="'SYSTEM_AMR_ITEM_EDIT'" link icon="EditPen" type="primary" @click="handleEdit(scope.row)" />
            </px-tooltip>
            <px-tooltip content="删除" placement="top">
              <px-button v-has="'SYSTEM_AMR_ITEM_DELETE'" link icon="Delete" type="primary" @click="handleDelete(scope.row)" />
            </px-tooltip>
          </template>
        </px-table-column>
      </px-table>
      <!-- 新增/修改抽屉 -->
      <AddGroupDrawer :visible="isDrawerShow" :drawerType="drawerType" :detailsData="rowData" @queryTable="queryTable" @closeDrawer="closeDrawer" />
    </px-scrollbar>
  </px-card>
</template>

<script setup lang="ts">
defineOptions({
  name: "SYSTEM_AMR_ITEM"
});
import { deleteAmrItemList, detailAmrList } from "@/api/system/amr";
import { PxMessage, PxMessageBox } from "px-ui";
import { onMounted, reactive, ref, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import AddGroupDrawer from "./components/addGroupDrawer.vue";

onMounted(() => {
  queryTable();
});

const route = useRoute();
const router = useRouter();
const loading = ref(true);
const data = reactive<Record<string, any>>({
  drawerType: "",
  detailsData: {},
  rowData: {},
  isDrawerShow: false
});

const { drawerType, detailsData, rowData, isDrawerShow } = toRefs(data);

const queryTable = async () => {
  try {
    loading.value = true;
    const res = await detailAmrList({ id: route.query.id });
    detailsData.value = res || [];
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};

const backMainPage = () => {
  router.go(-1);
};

/** 新增按钮操作 */
const handleAdd = () => {
  isDrawerShow.value = true;
  drawerType.value = "add";
};
const handleDetail = async row => {
  drawerType.value = "detail";
  rowData.value = row;
  isDrawerShow.value = true;
};

const handleEdit = async row => {
  drawerType.value = "edit";
  rowData.value = row;
  isDrawerShow.value = true;
};
// 关闭抽屉
const closeDrawer = () => {
  isDrawerShow.value = false;
  drawerType.value = "add";
  rowData.value = {};
};
/** 删除按钮操作 */
function handleDelete(row) {
  const { id, itemName } = row;
  PxMessageBox.confirm(`是否删除抄表项目${itemName}？`, "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      await deleteAmrItemList({ id });
      PxMessage.success("删除成功");
      queryTable();
    })
    .catch(() => {});
}
</script>
